<template>
  <div class="m-block">
    <h3>{{$t('block.title')}}（{{maxHeight|filterNum}}{{$t('block.count')}}）</h3>
    <div class="bottom-page">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
    <!-- 表格部分 -->
    <el-table :data="Blocks" stripe style="width: 100%" class="data-table">
      <template slot="empty">
        <div>
          <div
            v-if="Loading"
            class="loading-line"
            v-loading="Loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <span v-else>{{$t('page.nodata')}}</span>
        </div>
      </template>
      <el-table-column :label="$t('block.height')" width="100">
        <template slot-scope="item">
          <router-link
            :to="`/blockdetail?height=${item.row.height}`"
            class="light"
          >{{item.row.height}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="blockTime" :label="$t('block.time')" width="140">
        <template slot-scope="item">
          <count :time="item.row.blockTime"></count>
        </template>
      </el-table-column>
      <el-table-column prop="hash" :label="$t('block.hash')" width="180">
        <template slot-scope="item">
          <router-link
            :to="`/blockdetail?height=${item.row.height}`"
            class="light"
          >{{item.row.hash|filterHash}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="txCount" :label="$t('block.txCount')" width="100" align="center">
        <template slot-scope="item">
          <span class="light">{{item.row.txCount}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
        :simple="false"
      ></page-container>
    </div>
  </div>
</template>

<script>
import PageContainer from "@/components/mobile/PageContainer.vue";
import blockBase from "@/mixins/Block/block.js";
import Count from "@/components/Count.vue";
export default {
  mixins: [blockBase],
  components: {
    PageContainer,
    Count
  }
};
</script>

<style lang="scss">
.m-block {
  padding: 11px 20px 17px;
  min-height: calc(100vh - 113px);
  h3 {
    color: #53657a;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
  }
  .data-table {
    margin-top: 20px;
    box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
    border-radius: 2px;
    color: $black;
    font-size: 12px;
    .el-table__header thead tr {
      height: 37px;
    }
  }
  .bottom-page {
    margin: 20px 0;
    text-align: right;
  }
  .loading-line {
    height: 60px;
    line-height: 18px;
  }
  .el-table td:nth-of-type(1) .cell {
    padding-left: 20px;
  }
}
</style>